<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: #58a;
    }
  </style>
  <body>
    <div id="ad"></div>

    <script>
      //点击div 2s后颜色变成粉色
      //获取元素
      let ad = document.getElementById("ad");
      //绑定事件
      ad.addEventListener("click", function () {
        //箭头函数本身的this是静态的,它是指向在声明时所在作用域下的this.
        //定时器
        setTimeout(() => {
          this.style.backgroundColor = "pink";
        }, 2000);
      });

      //从数组中返回偶数的元素
      const arr = [1, 6, 9, 10, 100, 25];
      //   const result = arr.filter(function (item) {
      //     if (item % 2 === 0) {
      //       return true;
      //     } else {
      //       return false;
      //     }
      //   });
      //   console.log(result);

      const result = arr.filter((item) => item % 2 === 0);
      console.log(result);
      // 箭头函数适合与this无关的回调,定时器,数组的方法回调
      // 箭头函数不适合与this有关的问题,事件回调,对象的方法
    </script>
  </body>
</html>
